<template>
  <div class="container">
    <div class="widget">
      <div class="widget-container" ref="previewContainer">
        <div class="shop-brand" v-if="false">
          <img v-if="storeBackground.url" :src="storeBackground.url" alt="" class="shop-brand-img">
        </div>
        <preview-header class="content-margin-bottom"></preview-header>
        <vue-draggable
          :group="group"
          :animation="500"
          v-model="layouts"
          @start="onStart"
          @end="onEnd"
          @update="onUpdate"
          @sort="onSort"
        >
          <div
            v-for="(item, index) of layouts"
            :key="item.uuid"
            @click="onActivated(item, index, item.uuid)"
            class="preview-content"
            :class="{select: selected(index), 'content-margin-bottom': item.isMarginBottom}"
          >
            <preview-slide
              v-if="item.category === categoryConstants.SLIDE"
              :params="item.elements"
              :direction="item.direction"
              :index="index"
            />
            <preview-navigation
              v-if="item.category === categoryConstants.NAVIGATION"
              :params="item.elements"
              :type="item.type"
              :column="item.column"
              :row="item.row"
              :rowHeight="item.rowHeight"
              :textHeight="item.textHeight"
              :isShowText="item.isShowText"
              :isShowImg="item.isShowImg"
              :index="index"
            />
            <preview-recommend
              v-if="item.category === categoryConstants.RECOMMEND"
              :params="item.elements"
              :type="item.type"
              :index="index"
            />
            <preview-coupon
              v-if="item.category === categoryConstants.COUPON"
              :params="item.elements"
              :type="item.type"
              :background="item.background"
              :url="item.url"
              :width="item.width"
              :height="item.height"
              :index="index"
            />
            <div class="delete" @click.stop="deleteLayout(item, index)">
              <i class="el-icon-delete" />
            </div>
          </div>
        </vue-draggable>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import VueDraggable from 'vuedraggable'
import {
  PreviewHeader,
  PreviewSlide,
  PreviewNavigation,
  PreviewRecommend,
  PreviewCoupon
} from './components'
import { STORE_NAMESPACE, categoryConstants } from '../../config'
export default {
  name: 'Preview',
  components: {
    VueDraggable,
    PreviewHeader,
    PreviewSlide,
    PreviewNavigation,
    PreviewRecommend,
    PreviewCoupon
  },
  data () {
    return {
      categoryConstants: { ...categoryConstants },
      group: 'widget'
    }
  },
  computed: {
    ...mapState({
      currentIndex: state => state[STORE_NAMESPACE].currentIndex,
      storeBackground: state => state[STORE_NAMESPACE].background
    }),
    layouts: {
      get () {
        return this.$store.state[STORE_NAMESPACE].layouts
      },
      set (val) {
        this.$store.dispatch(`${STORE_NAMESPACE}/setDataSort`, val)
      }
    },
    selected () {
      return index => this.currentIndex === index
    }
  },
  methods: {
    // 激活
    onActivated (item, index, uuid) {
      console.log(item, index, uuid)
      this.$store.dispatch(`${STORE_NAMESPACE}/setCurrent`, item)
      this.$store.dispatch(`${STORE_NAMESPACE}/setCurrentIndex`, index)
    },
    async deleteLayout (item, index) {
      await this.$store.dispatch(`${STORE_NAMESPACE}/setData`, {
        type: 'delete',
        index: index
      })
      this.$store.dispatch(`${STORE_NAMESPACE}/setCurrent`, null)
      this.$store.dispatch(`${STORE_NAMESPACE}/setCurrentIndex`, null)
    },
    onStart (e) {
      console.log('start: ', e)
    },
    onEnd (e) {
      console.log('end: ', e)
    },
    onUpdate (e) {
      console.log('update: ', e)
    },
    onSort (e) {
      console.log('sort: ', e)
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  position: relative;
  // min-width: 331px; // 防止小屏幕变形, 这里的多出的1px是为了留给内部边框的位置
  min-width: 419px;
  height: 645px;
  margin: 10px auto auto auto;
  background: url("../../assets/images/iphoneX.png") no-repeat center 0;
  background-size: 100%;
  .widget {
    position: absolute;
    top: 64px;
    left: 21px;
    right: 23px;
    bottom: 22px;
    background-color: #f5f5f5;
    .widget-container {
      position: relative;
      height: 100%;
      overflow-y: scroll;
      box-sizing: border-box;
      padding: 0 10px;
      z-index: 0;
      &::-webkit-scrollbar {
        width: 0;
      }
      .shop-brand {
        width: 100%;
        height: 220px;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        background: #666;
        z-index: -1;
        &:before,
        &:after {
          content: "";
          display: block;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
        }
        &:before {
          top: 0;
          background: rgba(0, 0, 0, .5);
          z-index: 1;
        }
        &:after {
          z-index: 2;
          top: 124px;
          background: linear-gradient(180deg, transparent 0, hsla(0, 0%, 100%, .8) 80%, #f7f7f7);
        }
        .shop-brand-img {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          display: block;
          height: auto;
          width: 100%;
        }
      }
      .select {
        // border: 1px dashed #409EFF;
        // box-shadow: 0 0 0 1px #409EFF inset;
        outline: 1px dashed #409EFF;
      }
      .preview-content {
        position: relative;
        background-color: #fff;
        &:hover {
          .delete {
            display: flex;
          }
        }
        .delete {
          display: none;
          position: absolute;
          width: 20px;
          height: 20px;
          top: 0;
          right: 0;
          justify-content: center;
          align-items: center;
          z-index: 1000;
          cursor: pointer;
          i {
            font-size: 17px;
            color: #f4516c;
          }
        }
      }
      .content-margin-bottom {
        margin-bottom: 5px;
      }
      & ::v-deep .empty {
        width: 100%;
        height: 100%;
        background-color: #b1b1b1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40px;
        i {
          font-size: inherit;
        }
      }
    }
  }
}

</style>